import BpmnViewer from 'bpmn-js/lib/Viewer'
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'
import {
  append as svgAppend,
  attr as svgAttr,
  create as svgCreate,
} from 'tiny-svg'
import { query as domQuery } from 'min-dom'
import type Canvas from 'diagram-js/lib/core/Canvas'
import type EventBus from 'diagram-js/lib/core/EventBus'
import type { ConnectionLike, ShapeLike } from 'diagram-js/lib/core/Types'
import { fitViewport } from './utils'

type BpmnNode = ShapeLike | ConnectionLike | string

const zoomStep = 0.1

export function createMarker() {
  const marker = svgCreate('marker')

  svgAttr(marker, {
    id: 'active-marker',
    viewBox: '0 0 20 20',
    refX: '11',
    refY: '10',
    markerWidth: '10',
    markerHeight: '10',
    orient: 'auto',
    fill: '#408af1',
  })

  const path = svgCreate('path')

  svgAttr(path, {
    d: 'M 1 5 L 11 10 L 1 15 Z',
    style:
      ' stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1; ',
  })

  const defs = domQuery('defs')!
  svgAppend(marker, path)
  svgAppend(defs, marker)
}
export async function initViewer(container: string | HTMLElement, xml: string) {
  const viewerInstance = new BpmnViewer({
    container,
    width: '100%',
    height: '100%',
    additionalModules: [
      MoveCanvasModule,
    ],
  })
  try {
    await viewerInstance.importXML(xml)
  } catch { }
  return viewerInstance
}

export function zoomIn(canvas: Canvas, defaultZoom = 1) {
  const newZoom = Math.floor(defaultZoom * 100 + zoomStep * 100) / 100
  if (newZoom > 4) {
    return defaultZoom
  }
  canvas.zoom(newZoom)
  return newZoom
}
export function zoomOut(canvas: Canvas, defaultZoom = 1) {
  const newZoom = Math.floor(defaultZoom * 100 - zoomStep * 100) / 100
  if (newZoom < 0.2) {
    return defaultZoom
  }
  canvas.zoom(newZoom)
  return newZoom
}
export function resetZoom(canvas: Canvas) {
  return fitViewport(canvas)
}

export function setViewerStyle(canvas: Canvas, executedNodes: BpmnNode[], highlightLines: BpmnNode[], activeLightNode: BpmnNode[]) {
  // 已完成节点高亮
  if (executedNodes && executedNodes.length > 0) {
    executedNodes.forEach((item) => {
      canvas.addMarker(item, 'hn-bpmn-executed-node')
    })
  }

  // 顺序线高亮
  if (highlightLines && highlightLines.length > 0) {
    highlightLines.forEach((item) => {
      canvas.addMarker(item, 'hn-bpmn-executed-line')
    })
  }

  // 正在执行节点高亮
  if (activeLightNode && activeLightNode.length > 0) {
    activeLightNode.forEach((item) => {
      canvas.addMarker(item, 'hn-bpmn-current-node')
    })
    document.querySelectorAll('.highlight').forEach((item) => {
      item.querySelector('.djs-visual rect')?.setAttribute('stroke-dasharray', '4,4')
    })
  }
}

export function bindEvents(eventBus: EventBus) {
  eventBus.on('element.hover', (e: any) => {
    if (e.element.type === 'bpmn:UserTask') {
      // if (this.nodeDetail[e.element.id]) {
      //   this.detailInfo = this.nodeDetail[e.element.id]
      // } else {
      //   getOneActivity({
      //     instanceId: this.instanceId,
      //     activityId: e.element.id,
      //   }).then((res) => {
      //     this.nodeDetail[e.element.id] = res.data
      //     this.detailInfo = res.data
      //   })
      // }
    }
  })
  eventBus.on('element.out', (e) => {
    // if (e.element.type === 'bpmn:UserTask') {
    //   this.detailInfo = []
    // }
  })
}
